import React, {Component, Fragment} from 'react'
import './listAdd.css'
import ListItem from "./ListItem";
import axios from 'axios'
import Boss from './Boss'
import {TransitionGroup,CSSTransition} from "react-transition-group";

class ListAdd extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '<i>顺治</i>',
            list: [],
            count: 0
        }
    }

    UNSAFE_componentWillMount() {
        console.log('UNSAFE_componentWillMount——组件将要挂载（将被移除）')
    }

    componentDidMount() {
        console.log('componentDidMount——组件挂载完成')
        this.setState({
            count: this.state.list.length
        })
        axios.get('https://www.fastmock.site/mock/52d70552e79d99a858020074d09d22ce/list/api/data')
            .then(res => {
                console.log(res.data.data);
                this.setState({
                    list: res.data.data
                }, () => {
                    this.setState({
                        count: this.state.list.length
                    });
                })
            }).catch(e => {
            console.log('https://www.fastmock.site获取数据失败：',e)
            this.setState({
                list: ["尧","舜","周文王"]
            }, () => {
                this.setState({
                    count: this.state.list.length
                });
            })
        })

    }

    shouldComponentUpdate() {
        console.log('1. shouldComponentUpdate——组件可以被更新，必须返回布尔值，true则继续，false则终止')
        return true
    }

    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        console.log('2. UNSAFE_componentWillUpdate——组件将被更新前')
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('3. componentDidUpdate——组件更新后')
    }

    render() {
        console.log('render——组件挂载中…')

        return (
            <Fragment>
                <div className='inputGrp'>
                    <label htmlFor="item">添加一个可爱的皇帝(双击删除)：</label>
                    {/*显示绑定this是因为inputChange、add内部的this指向undefined*/}
                    <input id='item' ref={DOM => this.input = DOM} onChange={this.inputChange.bind(this)} value={this.state.inputValue}/>
                    <button onClick={this.add.bind(this)}>增加</button>
                </div>
                <ul ref={DOM => {
                    this.ul = DOM
                }}>
                    <TransitionGroup>
                    {
                        this.state.list.map((item, index) => {
                            /*return <li
                                dangerouslySetInnerHTML={{__html:item}}
                                key={index+item}
                                onClick={this.deleteItem.bind(this,index)}
                            > </li>*/
                            return (
                                <CSSTransition
                                    classNames="list-item"
                                    timeout={2000}
                                    unmountOnExit
                                    appear={true}
                                    key={item+index}
                                >
                                    <ListItem key={item + index}
                                        content={item}
                                        index={index}
                                        deleteItem={this.deleteItem.bind(this)}/>
                                </CSSTransition>
                            )
                        })
                    }
                    </TransitionGroup>
                    共{this.state.count}位皇帝
                </ul>
                <p>
                    这里调用组件ListItem不传content属性,但index属性必传(子组件中已设置)：
                    <ListItem index={0} deleteItem={() => alert('默认值，不要删了吧')}/>
                </p>
                <hr/>
                <Boss/>
            </Fragment>
        )
    }

    inputChange(e) {
        this.setState({
            inputValue: this.input.value
        })
    }

    add() {
        this.setState({
            // 数组增加元素
            list: [...this.state.list, this.state.inputValue],
            inputValue: '',
        }, () => {
            // setState是异步执行的，写在回调里的函数要等上面的执行完了才执行
            this.setState({
                count: this.state.list.length
            });
            console.log('写在setState的回调：', this.ul.children.length)
        });
        console.log('写在setState之后：', this.ul.children.length) //由于DOM还没更新，所以这里取出的值是更新前的值，比实际少1
    }

    deleteItem(index) {
        // 这里没有直接操作state里面的list是因为考虑到性能问题，这种写法是官方推荐的
        let list = this.state.list;
        list.splice(index, 1);
        this.setState({
            list
        }, () => {
            // setState是异步执行的，写在回调里的函数要等上面的执行完了才执行
            this.setState({
                count: this.state.list.length
            });
            console.log('写在setState的回调：', this.ul.children.length)
        })
    }
}

export default ListAdd
